<template>
    <div class="Recharge">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">充值</h1>
        </header>
        <div class="yinbi clearfix">
            <div class="title ">
                当前金币余额
            </div>
            <div class="Goldred">5000.0</div>
        </div>
        <div class="RechargeAmount">
             <div class="title">
              选择充值金额
            </div>    
        </div>
        <div class="ChoiceRecharge">
            <div class="ChoiceRecharge1">
                1000金币
                <p>￥10.00</p>
            </div>
             <div class="ChoiceRecharge1">
                1000金币
                <p>￥10.00</p>
            </div>
             <div class="ChoiceRecharge1">
                1000金币
                <p>￥10.00</p>
            </div>
              <div class="ChoiceRecharge1">
                1000金币
                <p>￥10.00</p>
            </div>
              <div class="ChoiceRecharge1">
                1000金币
                <p>￥10.00</p>
            </div>
               <div class="ChoiceRecharge1">
                20000金币
                <p>￥200.00</p>
            </div>
        </div>
            <div class="RechargeAmount">
             <div class="title">
              选择充值方式
            </div>    
        </div>
       <div class="yinbi clearfix">
            <div class="title ">
              <img src="../../img/My/支付宝.png" alt="">  微信支付
            </div>
            <div class="Goldred"><img src="../../img/My/设为默认选中.png" alt=""></div>
        </div>
         <div class="yinbi clearfix">
            <div class="title ">
              <img src="../../img/My/微信.png" alt="">  微信支付
            </div>
            <div class="Goldred"><img src="../../img/My/设为默认未选中.png" alt=""></div>
        </div>
    </div>
</template>
<script>
</script>
<style lang="scss" scoped>
.Recharge {
    padding-top:44px; 
    header {
        background: #d51313;
        a {
            color: #fff;
        }
        .mui-title {
            color: #fff;
        }
    }
    .yinbi {
        background: #fff;
        height: 0.9rem;
        padding: 0.0rem 0.3rem;
        border-bottom: 1px solid #e0e0ee;
        .title {
            float: left;
          line-height: 0.9rem;
          font-size: 0.3rem;
          img{
              height:0.4rem;
              position: relative;
              top:0.1rem
          }
        }
        .Goldred {
            color: #d51313;
            font-size: 0.28rem;
            float: right;
            line-height: 0.9rem;
            img{
                width:0.3rem;
            }
        }
    }
    .RechargeAmount{
        height:0.88rem;
        .title{
             padding: 0.0rem 0.3rem;
          line-height: 0.88rem;
          font-size: 0.3rem;
        }
    }
    .ChoiceRecharge{
          padding: 0.24rem;
          display: flex;
        justify-content:center;
        flex-wrap:wrap;
        height:3.5rem;
        background:#fff;
        text-align: center;
        
        div{
           width: 2rem;
           height:1.1rem;
           border:1px solid #e0e0e0;
            margin-left:0.24rem;
            margin-top: 0.24rem;
            font-size: 0.28rem;
            color:#515152;
            line-height: 0.5rem;
            p{
                 font-size: 0.24rem;
            color:#515152;
            }
        }
    }
}
</style>
